<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>	
<%@ include file="/pub/headmeta.jsp" %>
</head>
<body>
	<div class="right-head"><span class="right-head-font">专家答问</span></div>
	
	<form id="queryForm" method="post">
	<div class="function-bar">
		<c:if test="${user_info.roleId=='pro-yy' }">
		<div class="div0"><input type="button" class="button-bar" value="营养家上线" onclick="addPro(1);" id="onlineBt"/></div>
		<div class="div0"><input type="button" class="button-bar" value="营养家下线" onclick="removePro(1);" id="unlineBt" style="display:none;"/></div>
		</c:if>
		<c:if test="${user_info.roleId=='pro-bq' }">
		<div class="div0"><input type="button" class="button-bar" value="扮靓家上线" onclick="addPro(2);" id="onlineBt"/></div>
		<div class="div0"><input type="button" class="button-bar" value="扮靓家下线" onclick="removePro(2);" id="unlineBt" style="display:none;"/></div>
		</c:if>
		<c:if test="${user_info.roleId=='pro-yp' }">
		<div class="div0"><input type="button" class="button-bar" value="用品家上线" onclick="addPro(3);" id="onlineBt"/></div>
		<div class="div0"><input type="button" class="button-bar" value="用品家下线" onclick="removePro(3);" id="unlineBt" style="display:none;"/></div>
		</c:if>
		<c:if test="${user_info.roleId=='pro-yl' }">
		<div class="div0"><input type="button" class="button-bar" value="娱乐家上线" onclick="addPro(4);" id="onlineBt"/></div>
		<div class="div0"><input type="button" class="button-bar" value="娱乐家下线" onclick="removePro(4);" id="unlineBt" style="display:none;"/></div>
		</c:if>
	</div>	
	</form>
	
	<table id="MyTableList" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table-form">
		<tr align="center" class="STYLE1">			
			<th width="25%">&nbsp;</th>
			<th width="25%">&nbsp;</th>
			<th width="25%">&nbsp;</th>
			<th width="25%">&nbsp;</th>
		</tr>
	</table>
</body>
</html>
<script type="text/javascript">
<!--
//自动调用初始化
$(document).ready(function(){
	getProStatus();
	doQuery();
});
var timer;
//同步专家登入登录状态
function getProStatus(){
	var url="${ctx}/talk!getProStatus.action";
	$.post(url, "" ,function callback(txt){   
			var json = $.parseJSON(txt);
			if (json.code==0) {	
				if(json.data==null){
					$('#onlineBt').show();				
					$('#unlineBt').hide();
					clearInterval(timer);
				}else{
					$('#onlineBt').hide();				
					$('#unlineBt').show();
					timer=setInterval('doQuery()',4000);
				}
			}else{
				alert('专家上线失败！');
			}
		}	
	);
}
//专家上线
function addPro(flag){
	var url="${ctx}/talk!addPro.action";
	$.post(url, "type="+flag ,function callback(txt){   
			var json = $.parseJSON(txt);
			if (json.code==0) {	
				getProStatus();	
			}else{
				alert('专家上线失败！');
			}
		}	
	);
}
//专家下线
function removePro(flag){
	var url="${ctx}/talk!removePro.action";
	$.post(url, "type="+flag ,function callback(txt){   
			var json = $.parseJSON(txt);
			if (json.code==0) {	
				getProStatus();	
			}else{
				alert('专家下线失败！');
			}
		}	
	);
}
var dataTmp;
//查询
function doQuery(){	
	var url="${ctx}/talk!getTalkerForPro.action";
	$.post(url, "" ,function callback(txt){   
			var json = $.parseJSON(txt);
			if (json.code==0) {	
				doMix(json.data);
				createTable();		
			}else{
				alert('查询失败！');
			}
		}	
	);
}
//是否有变化
function doMix(objs){	
	for(var i=0;i<objs.length;i++){
		var obj=objs[i];
		obj.light=false;
		var f=false;
		if(dataTmp){
			for(var j=0;j<dataTmp.length;j++){
				if(obj.custId==dataTmp[j].custId){
					obj.light=dataTmp[j].light;				
					if(obj.count!=dataTmp[j].count){
						obj.light=true;
					}
					f=true;
					break;
				}
			}
			if(!f){
				obj.light=true;
			}
		}
		
	}
	dataTmp=objs;
}

//创建表数据
function createTable(){	
	var table=document.getElementById('MyTableList');
	for( var i=table.rows.length-1; i>0; i--){
		table.deleteRow(i); 
	}
	var b=document.createElement("tbody");
	for(var i=0;i<dataTmp.length;i+=4){
		var row=document.createElement("tr");	
		row.align="center";	
		
		row.appendChild(createNode(dataTmp,i));
		row.appendChild(createNode(dataTmp,i+1));
		row.appendChild(createNode(dataTmp,i+2));
		row.appendChild(createNode(dataTmp,i+3));

		setTdStyle(row);
		b.appendChild(row);
	}
	table.appendChild(b);
}
//创建一格
function createNode(objs,pos){
	var c=document.createElement("td");
	if(pos<objs.length){
		c.innerHTML="<a class='edit-font' href='javascript:clickNote("+pos+");'>"+objs[pos].custName+"["+cutStr(objs[pos].custId)+"]</a>";
		c.id='td_'+objs[pos].custId;
		if(objs[pos].light){
			c.style.background='red';
		}
	}else{
		c.innerHTML='&nbsp;';
	}
	return c;
}

//打开对话框
function clickNote(pos){	
	dataTmp[pos].light=false;
	createTable();
	window.open('${ctx}/talk!viewTalk.action?getAccount='+dataTmp[pos].custId,'实时对话窗口');	
}
//截断字符串
function cutStr(s){
	if(s.length>10){
		return s.substr(0,8)+"..";
	}else{
		return s;
	}
}
//-->
</script>
